	<template>
	<div class="login">
		<div class="logoLink">
			<router-link to="">
				<img src="../../assets/img/logo.png" width="200" height="auto" alt="云商" />
			</router-link>
		</div>
		<div style="height: 100%">
			<router-link to="">
				<img src="../../assets/img/backGround.png" width="100%" height="100%" alt="云商" />
			</router-link>
		</div>
		<div class="inputBox">
			<form action="">
				<input type="text" name="fakeusernameremembered" v-show="false" />
				<input type="password" name="fakeusernameremembered" v-show="false" />
				<div class="control-box">
					<div class="warn">{{info}}</div>
					<div class="control-form marginBottom18">
						<input type="text" name="username" @keydown="rulesFn(name,'name')" v-model.trim="name" tabindex="1" class="ui-input" placeholder="请输入手机号码/用户名" autocomplete="off">
					</div>
					<div class="control-form marginBottom18">
						<input type="password" name="password" @keyup="rulesFn(pass,'pass')" @keydown.enter="loginFn" v-model="pass" tabindex="2" class="ui-input" placeholder="请输入密码" autocomplete="off">
					</div>
					<div class="control-form marginBottom18 verifyDiv" v-if="false">
						<input type="text" class="ui-input" v-model="verifyCode" tabindex="3" name="verifyCode" placeholder="请输入右侧验证码" autocomplete="off">
						<img src="../../assets/img/verifyCode.jpg" title="点击刷新图片" height="40" width="105" class="auth-image">
					</div>
					<div class="control-form o-form marginBottom18 checkboxColorCCC">
						<el-checkbox v-model="cookie" class="checkboxFontSize14">记住用户名</el-checkbox>
						<a class="forget-pwd" @click="forget">忘记密码？</a>
					</div>
					<div class="control-form borderR4 blue marginBottom18">
						<a class="loginBtn" @click="loginFn">登录</a>
					</div>
				</div>
				<div class="down-con clearfix">
					<a class="fl" v-if="false">
						<em class="iconfont">&#xe63b;</em> 手机下载
					</a>
					<a class="fr" @click="reg">
						<em class="iconfont">&#xe690;</em> 注册
					</a>
				</div>
			</form>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				pass: "",
				verifyCode: "",
				info: "",
				cookie: true
			}
		},
		methods: {
			reg() { //注册
				window.location.hash = "#/reg";
			},
			forget() {
				window.location.hash = "#/forget";
			},
			loginFn() {
				if("" == this.name) {
					return this.info = "登录用户名不能为空！"
				} else if("" == this.pass) {
					return this.info = "登录密码不能为空！！"
				} else {
					this.axios({
						method: "POST",
						url: "/v3/member/login",
						params: {
							"loginNo": this.name,
							"password": this.md5(this.pass).toUpperCase(),
							"picRendCodeRequired": "0"
						}
					}).then((res) => {
						if(this.cookie) {
							this.setCookie("name", this.name, 15)
						} else {
							this.delCookie("name");
						};
						this.$router.replace({path:'/index'});
//						window.location.hash = "#/index";
//						window.location.reload();
						this.name = "";
						this.pass = "";
					}).catch((err) => {
						this.Public.openError(this, err.response.data)
					})
				}
			},
			rulesFn(val, type) {
				if("name" == type) {
					return this.info = val ? "" : "登录用户名不能为空"
				} else if("pass" == type) {
					return this.info = val ? "" : "登录密码不能为空"
				}
			},
			setCookie(c_name, value, expiredays) {
				var exdate = new Date();
				exdate.setDate(exdate.getDate() + expiredays);
				document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
			},
			getCookie(name) {
				var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
				if(arr = document.cookie.match(reg)) {
					return unescape(arr[2]);
				} else {
					return null;
				}
			},
			delCookie(name) {
				var exp = new Date();
				exp.setTime(exp.getTime() - 1);
				var cval = this.getCookie(name);
				if(cval != null)
					document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
			}
		},
		mounted() {
			this.name = this.getCookie("name") ? this.getCookie("name") : "";
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
		transition: .2s;
	}

	.login {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/*background: linear-gradient(45deg, #FDC031, #184069);*/
	}

	.logoLink {
		position: absolute;
		top: 40px;
		left: 40px;
	}

	.introduceLink {
		position: absolute;
		top: 10%;
		left: 15%;
	}

	.inputBox {
		position: absolute;
		width: 360px;
		right: 10%;
		top: 20%;
		padding: 60px 30px;
		background: url('../../assets/img/black-30.png') repeat;
	}

	.inputBox .warn {
		position: absolute;
		top: 40px;
		height: 14px;
		line-height: 14px;
		font-size: 14px;
		color: #f00;
	}

	.inputBox .control-form {
		position: relative;
	}

	.ui-input {
		box-sizing: border-box;
		width: 300px;
		height: 42px;
		padding: 0 20px;
		padding: 0px 20px;
		border: 1px solid #FFF;
		border-radius: 2px;
		transition: .4s;
		font-size: 14px;
	}

	.ui-input:focus {
		border-color: #03B8CC;
	}

	.auth-image {
		position: absolute;
		right: 1px;
		top: 1px;
		height: 40px;
	}

	.verifyDiv {
		position: relative;
	}

	.marginBottom18 {
		margin-bottom: 18px;
	}

	.o-form {
		position: relative;
		font-size: 14px;
		color: #CCCCCC;
	}

	.o-form a {
		cursor: pointer;
	}

	.o-form a:hover {
		color: #fff;
		text-decoration: underline;
	}

	.forget-pwd {
		float: right;
		color: #CCCCCC;
	}

	.loginBtn {
		cursor: pointer;
		display: block;
		width: 300px;
		height: 42px ;
		line-height: 40px ;
		font-size: 18px;
		margin-left: 0 ;
		background: rgb(9, 159, 184);
		text-align: center;
		color: #fff;
		border-radius:3px ;
	}

	.inputBox .down-con {
		position: absolute;
		bottom: 40px;
		right: 30px;
		left: 30px;
		height: 30px;
		line-height: 30px;
	}

	.inputBox .down-con a {
		display: inline-block;
		font-size: 16px;
		color: #CCCCCC;
		height: 30px;
		line-height: 30px;
		cursor: pointer;
		transition: .2s;
	}

	.inputBox .down-con a:hover {
		color: #fff;
	}

	.inputBox .down-con a em {
		height: 30px;
		line-height: 30px;
	}
</style>
